import React, { Component } from 'react'
import './index.less'

class ResourcePool extends Component {
  constructor(props) {
    super(props)
    this.state = {
      tableH: [
        // {
        //   label: '地域',
        //   width: '343',
        // },
        {
          label: '原资源池名称',
          width: '357',
        },
        {
          label: '现资源池名称',
          width: '375',
        },
      ],
      data: [
        {
          area: '华北',
          options: [
            { original: '华北节点1', current: '华北-北京1' },
            { original: '华北节点2（北京）', current: '华北-北京2' },
            { original: '华北节点3', current: '华北-北京3' },
          ],
        },
        {
          area: '华东',
          options: [
            { original: '华东节点1（江苏）', current: '华东-无锡' },
            { original: '华东节点2（福建）', current: '华东-福州' },
            { original: '华东节点3（浙江）', current: '华东-宁波' },
            { original: '华东节点4', current: '华东-苏州' },
            { original: '华东节点5', current: '华东-济南' },
            { original: '华东节点6', current: '华东-上海1' },
            { original: '上海节点', current: '华东-上海2' },
            { original: '华东节点7', current: '华东-杭州' },
          ],
        },
        {
          area: '华南',
          options: [
            { original: '华南节点1', current: '华南-广州1' },
            { original: '华南节点2', current: '华南-广州2' },
            { original: '华南节点3', current: '华南-广州3' },
          ],
        },
        {
          area: '华中',
          options: [
            { original: '华中节点1', current: '华中-长沙1' },
            { original: '华南节点4', current: '华中-长沙2' },
            { original: '华中节点2', current: '华中-郑州' },
          ],
        },
        {
          area: '西南',
          options: [
            { original: '西南节点1', current: '西南-成都' },
            { original: '西南节点2', current: '西南-重庆' },
            { original: '云南节点', current: '云南-昆明' },
          ],
        },
        {
          area: '西北',
          options: [
            { original: '青海节点1', current: '青海-西宁' },
            { original: '西北节点1', current: '西北-西安' },
          ],
        },
        {
          area: '东北',
          options: [
            { original: '东北节点1（辽宁）', current: '东北-沈阳' },
          ],
        },
      ],
    }
  }

  render() {
    const { data, tableH } = this.state
    return (
      <div className="resource-page">
        <h1 className="page-header">资源池名称新旧版映射表</h1>
        <div className="page-table-h">
          {
            tableH.length && tableH.map((item, index) => {
              return (
                <span key={index} style={{ width: item.width + 'px' }}>{item.label}</span>
              )
            })
          }
        </div>
        {
          data.length && data.map((item, index) => {
            const options = item.options
            return (
              <div className="item" key={index}>
                <div className="item-area" style={{ width: '343px' }}>{item.area}</div>
                <div className="item-group">
                  {
                    options.length && options.map((k, i) => {
                      return (
                        <div key={i} className="item-name">
                          <div className="item-original" style={{ width: '357px' }}>{k.original}</div>
                          <div className="item-current" style={{ width: '375px' }}>{k.current}</div>
                        </div>
                      )
                    })
                  }
                </div>

              </div>
            )
          })
        }
      </div>
    )
  }
}

export default ResourcePool
